[#assign hasAttachFile = product?? && product.attachfile?? && product.attachfile != '' && product.attachfile != '#']
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>编辑商品</title>
    <link href="/res/back/css/base.css" rel="stylesheet" type="text/css"/>
    <link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <style>
        .lpdiv{display: inline-block;float: left;margin-left: 220px;margin-top: 15px;width: 100%;}
        .showimgs{display: inline-block;}
        .delimgas{display:inline-block;margin-left:50px;cursor:pointer;} 
    </style>
</head>
<body>
<!-- 新建 -->
<div class="panel panel-info panel-content" style="overflow-y: auto;"  >
    <div class="panel-heading">
        <h3 class="panel-title">编辑商品</h3>
    </div>
    <form class="form-horizontal " role="form" id="mainForm" data-validator-option="{theme:'yellow_right', timely:3}">
        <input type="hidden" name="productId" value="${product.id!}">
        <div class="form-group" style="margin-top:15px;">
            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>商品名称</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="productName" placeholder="请输入商品名称"
                       name="productName" required="required" value="${product.name!}" data-rule="required" data-display="商品名称">
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">所属分类</label>
            <div class="col-sm-5">
                <p class="form-control-static">${cates.firstName!}-${cates.secondName!}-${cates.thirdName!}</p>
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">卖点</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="subName" placeholder="请输入卖点"
                       name="subName" value="${product.subName!}">
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">型号</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="model" placeholder="请输入型号"
                       name="model" value="${product.model!}">
            </div>
        </div>
        <div class="form-group form-inline">
            <label for="title" class="col-sm-2 control-label">所属品牌</label>
            <div class="col-sm-5">
                <select name="brandId" id="brandId" class="form-control">
                    <option value="">请选择</option>
                    [#list brandList as brand]
                        <option value="${brand.id!}" [#if (product.brandId)?? && brand.id == product.brandId]selected[/#if]>${brand.name!}</option>
                    [/#list]
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>规格组合</label>
            <div class="col-sm-7">
                <table class="table table-hover table-bordered table-striped table-condensed" id="skuTable">
                    <thead>
                    <tr>
                        <th >规格</th>
                        <th >市场价</th>
                        <th >会员价</th>
                        <th >商品数量</th>
                    </tr>
                    </thead>
                    [#list skuList as sku]
                    <tr data-skuid="${sku.id!}">
                        <td>${sku.skuStr!}</td>
                        <td>
                            <div class="input-group input-sm">
                                <div class="input-group-addon input-sm">￥</div>
                                <input type="number" class="form-control input-sm" value="${sku.price?string('0.00')!}" data-input="price">
                            </div>
                        </td>
                        <td>
                            <div class="input-group input-sm">
                                <div class="input-group-addon input-sm">￥</div>
                                <input type="number" class="form-control input-sm" value="${sku.memberPrice?string('0.00')!}" data-input="memberPrice">
                            </div>
                        </td>
                        <td>
                            <div class="input-group input-sm">
                                <input type="number" class="form-control input-sm" value="${sku.stockQuantity!}" data-input="stockQuantity" data-old="${sku.stockQuantity!}">
                            </div>
                        </td>
                    </tr>
                    [/#list]
                </table>
            </div>
        </div>
        <div class="form-group form-inline">
            <label for="title" class="col-sm-2 control-label">计量单位</label>
            <div class="col-sm-5">
                <select name="unit" id="unit" class="form-control">
                    <option value="">请选择</option>
                    [#list unitList as unit]
                        <option value="${unit.code}" [#if (product.unit)?? && product.unit == unit.code]selected[/#if]>${unit.name!}</option>
                    [/#list]
                </select>
            </div>
        </div>
        <div class="form-group form-inline">
            <label for="title" class="col-sm-2 control-label">质保期</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="serviceDuration" placeholder="请输入质保期"
                       name="serviceDuration" value="${product.serviceDuration!}">
                <select name="serviceUnit" id="serviceUnit" class="form-control">
                    <option value="月" [#if product.serviceUnit?? && product.serviceUnit! == '月']selected[/#if] >月</option>
                    <option value="年" [#if product.serviceUnit?? && product.serviceUnit! == '年']selected[/#if] >年</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">售后保障</label>
            <div class="col-sm-5">
                <textarea class="form-control" id="service" placeholder="补充说明各配件的保障时间"
                       name="service" required="required">${product.service!}</textarea>
            </div>
        </div>
        <div class="form-group" id="picDiv">
            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>商品图</label>
            <div class="col-sm-5">
                <button onclick="uploadPic()" type="button" class="btn btn-default">上传图片</button>
            </div>
            [#list product.picPath?split(';') as pic]
                <div class="lpdiv">
                    <a target="_blank" class="" href="${pic!}">${pic!}</a>
                    <a onclick="delimgs(this)" class="delimgas">删除</a>
                </div>
            [/#list]
        </div>
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>详细介绍</label>
            <div class="col-sm-5">
                <script id="descr" name="descr" id="descr" type="text/plain">${product.descr!}</script>
            </div>
        </div>
        <div class="form-group" id="attachDiv">
            <label for="title" class="col-sm-2 control-label">技术参数</label>
            <div class="col-sm-5">
                <button onclick="uploadAttach()" type="button" class="btn btn-default" [#if hasAttachFile]style="display: none;"[/#if]>上传附件</button>
                <p class="form-control-static">
                    [#if hasAttachFile]
                        <a href="${product.attachfile!}" target="_blank">${product.attachName!}</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:void(0)" onclick="removeAttach(this)">删除</a>
                    [/#if]
                </p>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-info" onclick="subForm();">保存</button>
                [#if product.state == 0 || product.state == 3]
                    <button type="button" class="btn btn-info" onclick="audit(true)">通过</button>
                    <button type="button" class="btn btn-info" onclick="audit(false)">驳回</button>
                [/#if]
            </div>
        </div>
    </form>
</div>

<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/res/third/ueditor/lang/zh-cn/zh-cn.js"></script>
<script src="/res/third/nice-validator/jquery.validator.min.js?local=zh-CN" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript">
    var ue;
    $(function () {  
        var options = {
            theme : "default",
            lang : "zh-cn",
            zIndex : 1,
            initialFrameWidth : 800,
            initialFrameHeight : 200,
            autoHeightEnabled : false,
            pasteplain : false,//默认纯文本格式粘贴,
            elementPathEnabled : false,
            focus : false,//初始化时不让编辑器获取焦点
            wordCount : false,
            enableAutoSave : false, //关闭自动保存
            toolbars : [ [ 'fullscreen', 'undo', 'redo', 'bold',
                'indent', 'italic', 'underline', 'strikethrough',
                'justifyleft', 'justifyright', 'justifycenter',
                'justifyjustify', 'rowspacingtop', 'rowspacingbottom',
                'lineheight', 'removeformat', '|', 'fontfamily',
                'fontsize', 'forecolor', 'backcolor', 'insertorderedlist',
                'insertunorderedlist', 'insertimage', 'emotion',
                'inserttable', 'mergeright', 'mergedown', 'deleterow',
                'deletecol', 'splittorows', 'splittocols', 'splittocells',
                'deletecaption', 'mergecells', 'deletetable' ] ]
        };
        ue = UE.getEditor('descr', options);
       /*  $('iframe', parent.document).height($(".panel.panel-info").height()+200); */
    });

    var picDialog;
    function uploadPic() {
        picDialog = art.dialog.uploadFile("上传商品图",
                {callback: "uploadPicCallBack", userpath:"admin", extensions:"gif,jpg,png,jepg,bmp"});
    }
    function uploadPicCallBack(response) {
        var picNum = $.map($('#picDiv .lpdiv'), function(v) {
            return $(v).find('a:first').prop('href');
        }).length;
        picDialog.close();
        if(picNum >= 10) {
            //已经上传了10张图片
            art.dialog.alert('商品图最多上传10张');
            return;
        }
        $("#picDiv").append("<div class='lpdiv'>"
                +"<a target='_blank' class='showimgs' href='"+response.url+"'>"+response.url+"</a>"
                +"<a onclick='delimgs(this)' class='delimgas'>删除</a></div>");
    }
    function delimgs(node){
        $(node).parents(".lpdiv").remove();
    }

    var attachDialog;
    function uploadAttach() {
        picDialog = art.dialog.uploadFile("上传技术参数附件",
                {callback: "uploadAttachCallBack", userpath:"admin", extensions:"xls,zip,rar,xlsx,doc,docx,ppt,pptx"});
    }
    function uploadAttachCallBack(response) {
        picDialog.close();
        $('#attachDiv button').hide();
        $("#attachDiv p").append("<a href='" + response.url + "' target='_blank'>" + response.originalName + "</a>&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' onclick='removeAttach(this)'>删除</a>");
    }
    function removeAttach(node) {
        $(node).parent().html('');
        $('#attachDiv button').show();
    }

    function subForm() {
        if($('#mainForm').isValid()) {
            var isOk = true;
            //规格
            var skuList = [];
            $.each($('#skuTable tr[data-skuid]'), function() {
                var skuId = $(this).attr('data-skuid');
                var price = $(this).find('input[data-input=price]').val();
                var memberPrice = $(this).find('input[data-input=memberPrice]').val();
                var newStock = $(this).find('input[data-input=stockQuantity]').val();
                var oldStock = $(this).find('input[data-input=stockQuantity]').attr('data-old');

                if(Number(price) > 0 && Number(newStock) > 0 && Number(memberPrice) > 0 && Number(price) >= Number(memberPrice)) {
                    skuList.push({skuId : skuId, price : price, memberPrice : memberPrice, changeStock : Number(newStock) - Number(oldStock)});
                } else {
                    art.dialog.alert('规格输入错误');
                    isOk = false;
                    return false;
                }
            });
            //商品图
            var picPath = $.map($('#picDiv .lpdiv'), function(v) {
                return $(v).find('a:first').prop('href');
            }).join(';');
            //技术参数
            var attachfile = '';
            var attachName = '';
            if($('#attachDiv p a:first').length > 0) {
                attachfile = $('#attachDiv p a:first').prop('href');
                attachName = $('#attachDiv p a:first').text();
            }

            if(picPath == '') {
                art.dialog.alert('请上传商品图');
                return;
            }
            if(ue.getContentLength() == 0) {
                art.dialog.alert('请输入商品详细介绍');
                return;
            }

            if(isOk) {
                var data = $('#mainForm').serialize() + '&picPath=' + picPath + '&attachfile='
                        + attachfile + '&attachName=' + attachName + '&skuList=' + JSON.stringify(skuList);
                art.dialog.post({
                    url: "/product/editProduct.do",
                    type: "post",
                    dataType: "json",
                    data: data,
                    success: function (data) {
                        if (data.success) {
                            alert('操作成功');
                            top.closeTempTab(true);
                        } else {
                            alert(data.msg);
                        }
                    }

                }, "数据正在提交.... ");
            }
        }
    }

    function audit(pass) {
        if(!pass) {
            layer.prompt({title: '请输入驳回原因', formType: 2}, function(value, index) {
                if($.trim(value) == '') {
                    alert('请输入驳回原因');
                    return;
                }
                layer.confirm("确定" + (pass ? "通过" : "驳回") + "吗？", function() {
                    submitAudit(pass, value);
                    layer.close(index);
                });
            });
        } else {
            layer.confirm("确定" + (pass ? "通过" : "驳回") + "吗？", function() {
                submitAudit(pass);
                layer.close(index);
            });
        }
    }

    function submitAudit(pass, auditOpinion) {
        art.dialog.post({
            url: "/product/auditProduct.do",
            type: "post",
            dataType: "json",
            data: {productId : '${product.id!}', pass : pass, auditOpinion : auditOpinion},
            success: function (data) {
                if (data && data.success) {
                    alert('操作成功');
                    top.closeTempTab(true);
                } else {
                    alert(data.msg);
                }
            }

        }, "数据正在提交.... ");
    }
</script> 
</body>
</html>

